<template>
  <aside  class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin" >
    <div class="site-sidebar__inner" style="background-color:#303A56">
      <el-menu
      
        :default-active="activeMenu"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu"
        style="background: #303A56"
      >
        <!-- <el-submenu index="demo">
          <template slot="title" >
            <i class="el-icon-bank-card"></i>
            <span class="tab-span">机构审批平台</span>
          </template>
          <el-menu-item style="" index="check" @click="$router.push({ name: 'check' })">
            <span slot="title">机构入驻审批</span>
          </el-menu-item>

          <el-menu-item style="" index="message" @click="$router.push({ name: 'home'})">
            <span slot="title">机构信息审批</span>
          </el-menu-item>

        </el-submenu>

            <el-menu-item index="inform" @click="$router.push({ name: 'inform' })">
              <i class="el-icon-warning"></i>
              <span>举报核实系统</span>
            </el-menu-item>

        <el-menu-item index="enforce" @click="$router.push({ name: 'enforce' })">
          <i class="el-icon-aim"></i>
          <span>联合执法系统</span>
        </el-menu-item>

        <el-menu-item index="bank" @click="$router.push({ name: 'bank' })">
          <i class="el-icon-search"></i>
          <span>银行API查询</span>
        </el-menu-item>

        <el-menu-item index="credit" @click="$router.push({ name: 'credit' })">
          <i class="el-icon-edit-outline"></i>
          <span>信用评价系统</span>
        </el-menu-item> -->
        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
  import SubMenu from './main-sidebar-sub-menu'
  import {isURL} from '@/utils/validate'

  export default {
    data () {
      return {
        dynamicMenuRoutes: []
      }
    },
    components: {
      SubMenu
    },
    computed: {
      sidebarLayoutSkin: {
        get () {
          return this.$store.state.common.sidebarLayoutSkin
        }
      },
      sidebarFold: {
        get () {
          return this.$store.state.common.sidebarFold
        }
      },
      menuList: {
        get () {
          return this.$store.state.common.menuList
        },
        set (val) {
          this.$store.commit('common/updateMenuList', val)
        }
      },
      menuActiveName: {
        get () {
          return this.$store.state.common.menuActiveName
        },
        set (val) {
          this.$store.commit('common/updateMenuActiveName', val)
        }
      },
      mainTabs: {
        get () {
          return this.$store.state.common.mainTabs
        },
        set (val) {
          this.$store.commit('common/updateMainTabs', val)
        }
      },
      mainTabsActiveName: {
        get () {
          return this.$store.state.common.mainTabsActiveName
        },
        set (val) {
          this.$store.commit('common/updateMainTabsActiveName', val)
        }
      }
    },
    watch: {
      $route: 'routeHandle'
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      this.routeHandle(this.$route)
    },
    methods: {
      // 路由操作
      routeHandle (route) {
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
              if (!route) {
                return console.error('未能找到可用标签页!')
              }
            }
            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || '',
              params: route.params,
              query: route.query
            }
            this.mainTabs = this.mainTabs.concat(tab)
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  /*.el-menu-item{*/
    /*background: #11204A;*/
    /*color: #ffffff;*/
  /*}*/
  .el-menu-item span{
    color: #ffffff;
  }
  .el-submenu span{
    color: #ffffff;
  }
  .el-menu-item span:visited{
    background: #171aaa;
  }
  .el-menu li:visited{
    background: #171aaa;
  }
  .site-sidebar__inner{
    background: #11204A;
  }
  .site-sidebar--dark .site-sidebar__menu.el-menu .el-menu, .site-sidebar--dark .site-sidebar__menu.el-menu .el-submenu.is-opened, .site-sidebar--dark > .el-menu--popup .el-menu, .site-sidebar--dark > .el-menu--popup .el-submenu.is-opened, .site-sidebar--dark-popper .site-sidebar__menu.el-menu .el-menu, .site-sidebar--dark-popper .site-sidebar__menu.el-menu .el-submenu.is-opened, .site-sidebar--dark-popper > .el-menu--popup .el-menu, .site-sidebar--dark-popper > .el-menu--popup .el-submenu.is-opened {
    background: #11204A;
  }
  // .menuitem li{
  //   background: #1B89F0
  // }
  // .site-sidebar__inner .is-active{
  //   background: red;
  //   /* background: #1B89F0; */
  // }.is-opened{
  //   background: #1B89F0
  // }
  // 以下未覆盖导航栏hover效果。以及选中效果颜色等
  // .el-submenu:hover{
  //   outline: 0 !important;  
  //   color: #409EFF !important;  
  //   background-color: #409EFF !important;
  // }
//   .el-menu-item:hover{  
//   outline: 0 !important;  
//   color: #409EFF !important;  
//   background-color: #409EFF !important;
// }  
.el-submenu {
  .el-menu-item{
    margin-left: 25px;
  }
}
</style>
